<template>
    <div class="main">
        <headNav title="公益基金"></headNav>
        <div class="top">
            <p>
                <span>
                    待提取基金(元)
                </span>
                <span class="t-right" @click="lookDetail">
                    <span>
                        查看公益详情
                    </span>
                    <img src="@/assets/img/welfareFound/white-right.png" alt="">
                </span>
            </p>
            <div class="t-sec">
                <span class="cashNum">
                    {{countMoney}}
                </span>
                <span class="cashBtn" @click="toshowModal">
                    申请提现
                </span>

                <div class="wszh"  @click="toPersonInfo">完善账户信息</div>
            </div>
        </div>
        <bar @getRank="setBar"></bar>
        <!-- 公益统计 -->
        <div class="container" v-if="barNum == 0">
            <!-- <div class="navBox">
                <innerNav @getRank="setNav"></innerNav>
            </div> -->
            <div class="echartBox">
                <lines :data="data"></lines>
            </div>
            <!-- <div class="totalBot">
                <div class="oneTotal">
                    <div>
                        推荐公益
                    </div>
                    <div>
                        5人
                    </div>
                    <div class="money">
                        +456.5
                    </div>
                </div>
            </div> -->
        </div>
        <!-- 公益明细 -->
        <div class="container" v-if="barNum == 1">  
            <div class="navBox">
                <!-- <innerNav @getRank="setNav"></innerNav> -->
            </div>
            <div class="oneDetail">
                <p>
                    <span>
                        <img src="@/assets/img/welfareFound/heart.png" alt=""> 
                        <span class="username">
                            推荐奖-张骆米
                        </span>
                    </span>
                    <span class="money">
                        +3.2元
                    </span>
                </p>
                <div class="time">
                    2021-02-18
                </div>
            </div>
        </div>
        <!-- 提现记录 -->
        <div class="cashBox" v-if="barNum == 2">
            <!-- <div class="navBox">
                <innerNav @getRank="setNav"></innerNav>
            </div> -->
            <div class="cashTop">
                <div>
                    提取状态
                </div>
                <div>
                    申请日期
                </div>
                <div>
                    提现金额
                </div>
            </div>
            <div class="cashContent" v-loadmore="loadmore">   
                <div class="oneCash" v-for="(item, index) in cashRecord" :key="index">
                    <div>
                        <img v-if="item.settleStatus == 0" src="@/assets/img/welfareFound/isFire.png" alt="">
                        <img v-if="item.settleStatus == 1" src="@/assets/img/welfareFound/checking.png" alt="">
                        <img v-if="item.settleStatus == 2" src="@/assets/img/welfareFound/cashed.png" alt="">
                    </div>
                    <div class="time">
                        {{item.applyTimeStr}}
                    </div>
                    <div class="money">
                        {{item.settleMoney}}元
                    </div>
                </div>
                <div class="load-p">
                    <load-more v-if="isMore" :tip="'正在加载'"></load-more>
                    <load-more v-else :show-loading="false" :tip="'没有更多了'" background-color="#fbf9fe"></load-more>
                </div>
            </div>
        </div>
        <div v-show="showModal" class="modal">
            <div class="cashingBox">
                <p class="c-top">
                    提现金额
                </p>
                <div class="inputBox">
                    <input type="number" v-model="countNum" @keyup="yanzheng" placeholder="￥00.00">元
                </div>
                <p class="mark">
                    账户可提现金额{{countMoney}}元，最低提现金额{{minWithdrawalBalance}}元
                </p>
                <div class="sureBox">
                    <span class="sure" @click="getCash">
                        确定    
                    </span>
                    <span class="cancel" @click="showModal=false">
                        取消
                    </span>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import headNav from '@/components/headNav/headNav'
import bar from './topbar'
import innerNav from './nav'
import lines from './echarts/line'
import { LoadMore} from 'vux'
export default {
    components: {
		headNav, bar, innerNav, lines, LoadMore
	},
    data () {
        return {
            countMoney: 0,
            minWithdrawalBalance: 0,
            countNum: null,
            showModal: false,
            barNum: 0,
            navNum: 0,
            data: [],
            pageNum: 0,
            pageSize: 10,
            cashRecord: [],
            isMore: true
        }
    },
    mounted () {
        this.getPerson()
        this.setBar(0)
    },
    methods: {
        lookDetail () {
            this.$router.push('/myNew/publicWelfare')
        },
        toPersonInfo () {
            this.$router.push('personInfo')
        },
        setBar (num) {
            this.barNum = num
            if (num == 0) {
                this.getList()
            }
            if (num == 2) {
                this.getCashRecord()
            }
        },
        setNav (num) {
            this.navNum = num
        },
        toshowModal () {
            this.showModal = true
        },
        loadmore () {
            this.getCashRecord()
        },
        // 获取提现记录
        getCashRecord () {
            if (!this.isMore) {
                return
            }
            this.pageNum++
            var params = {
                page: this.pageNum,
                limit: this.pageSize,
                sidx: 'applyTime'
                // order: 'desc'
            }
            this.$store.dispatch('welfareFound/GetCashRecord', params).then(
                res => {
                    if (res.status == 200) {
                        if (res.data.pages == this.pageNum) {
                            this.isMore = false
                        }
                        this.cashRecord =  this.cashRecord.concat(res.data.records)
                    } else {
                        this.isMore = false
                    }
                }
            ).catch(
                () => {
                    this.isMore = false
                }
            )
        },
        // 获取统计 
        getList () {
            this.$store.dispatch('welfareFound/GetList').then(
                res => {
                    if (res.status == 200) {
                        var arr = []
                        res.data.forEach(item => {
                            arr.push({name: item.date, value: item.amount})
                        })
                        this.data = arr
                    }
                }
            )
        },
        // 获取个人信息
        getPerson () {
            this.$store.dispatch('welfareFound/GetPerson').then(
                res => {
                    if (res.status == 200) {
                        this.countMoney = res.data.withdrawalBalance ? parseFloat(res.data.withdrawalBalance) : 0
                        this.minWithdrawalBalance = res.data.minWithdrawalBalance ? parseFloat(res.data.minWithdrawalBalance) : 0
                    }
                }
            )
        },
        // 确认提现
        getCash () {
            
            if (!this.countNum) {
                this.$vux.toast.text('请输入提现金额')
                return
            }
            if (this.countMoney == 0 || parseFloat(this.countNum) > parseFloat(this.countMoney)) {
                this.$vux.toast.text('提现金额不足')
                return
            }
            if (parseFloat(this.countNum) < this.minWithdrawalBalance) {
                this.$vux.toast.text('提现金额不得低于' + this.minWithdrawalBalance + '元')
                return
            }
            this.$store.dispatch('welfareFound/GetCash', {withdrawalAmount: this.countNum}).then(
                res => {
                    if (res.status == 200) {
                        this.$vux.toast.text('提现成功')
                        this.showModal = false
                        this.getPerson()
                        if (this.barNum == 2) {
                            this.pageNum = 0
                            this.cashRecord = []
                            this.getCashRecord()
                        }
                    } else {
                        this.$vux.toast.text(res.msg)
                    }
                }
            )
        },
        // 验证金额
        yanzheng(){
            if (this.countNum != '' && this.countNum.substr(0, 1) == '.') {
                this.countNum = "";
            }
            this.countNum = this.countNum.replace(/^0*(0\.|[1-9])/, '$1');//粘贴不生效
            this.countNum = this.countNum.replace(/[^\d.]/g, "");  //清除“数字”和“.”以外的字符
            this.countNum = this.countNum.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的
            this.countNum = this.countNum.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
            this.countNum = this.countNum.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');//只能输入两个小数
            if (this.countNum.indexOf(".") < 0 && this.countNum != "") {//以上已经过滤，若无小数点，首位不能为类似于 01、02的金额
                if (this.countNum.substr(0, 1) == '0' && this.countNum.length == 2) {
                this.countNum = this.countNum.substr(1, this.countNum.length);
                }
            }
        }
    }
}
</script>
<style scoped>
.main{
    background: #fff;
}
    .top{
        height: 1.6rem;
        background: #128FEF;
        padding: 0 0.48rem;
    }
    .top >p{
        display: flex;
        justify-content: space-between;
        color: #fff;
        font-size: 0.28rem;
    }
    .t-right span,.t-right img{
        vertical-align: middle;
    }
    .t-right img{
        width: 0.11rem;
        height: 0.2rem;
    }
    .t-sec{
        padding: 0.31rem 0; position: relative;
    }
    .wszh{
        position: absolute; top: 0.4rem; right: 0; 
        color: #fff; font-size: 0.22rem;
        width: 1.76rem; height: 0.44rem; border: 1px solid #fff; border-radius: 0.22rem;
        text-align: center; line-height: 0.44rem;
    }
    .t-sec>.cashNum{
        vertical-align: middle;
        font-size: 0.48rem;
        color: #fff;
    }
    .cashBtn{
        vertical-align: middle;
        display: inline-block;
        width: 1.6rem;
        text-align: center;
        height: 0.62rem;
        line-height: 0.62rem;
        background: #FF9900;
        border-radius: 0.31rem;
        color: #fff;
        font-size: 0.28rem;
    }
    /* .container{
        padding: 0 0.16rem;
    } */
    .navBox{
        margin: 0.28rem 0;
        overflow: hidden;
    }
    .echartBox{
        height: 4.28rem;
        background: #fff;
        /* box-shadow: 0px 0.04rem 0.18rem 0px rgba(0, 0, 0, 0.07);
        border-radius: 0.15rem; */
        box-sizing: border-box;
        /* padding: 0 0.24rem; */
    }
    .totalBot{
        padding: 0.24rem;
        background: #fff;
        margin-top: 0.28rem;
        box-shadow: 0px 0.04rem 0.18rem 0px rgba(0, 0, 0, 0.07);
        border-radius: 0.15rem;
    }
    .totalBot>.oneTotal{
        width: 100%;
        border-bottom: 0.01rem solid #e5e5e5;
        font-size: 0.28rem;
        color: #333333;
        padding: 0.28rem 0;
    }
    .oneTotal>div{
        display: inline-block;
        width: 38%;
    }
    .oneTotal>.money{
        width: 20%;
        text-align: right;
        color: #FF3000;
    }
    .oneDetail{
        box-shadow: 0px 0.04rem 0.18rem 0px rgba(0, 0, 0, 0.07);
        border-radius: 0.15rem;
        background: #fff;
        padding: 0.32rem 0.34rem 0.32rem 0.24rem;
    }
    .oneDetail>p{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.12rem;
    }
    .oneDetail img{
        width: 0.4rem;
        height: 0.4rem;
        vertical-align: middle;
    }
    .oneDetail .username{
        color: #333;
        font-size: 0.32rem;
        vertical-align: middle;
    }
    .oneDetail .money{
        color: #FF3000;
        font-size: 0.32rem;
    }
    .oneDetail .time{
        color: #999;
        font-size: 0.28rem;
        padding-left: 0.4rem;
    }
    .cashTop{
        display: flex;
        justify-content: space-between;
        /* padding: 0 0.56rem 0 0.44rem; */
        height: 0.95rem;
        align-items: center;
        color: #333;
        font-size: 0.28rem;
        border-bottom: 0.01rem solid #e5e5e5;
        background: #fff;
    }
    .cashTop >div{ 
        width: 30%;
        text-align: center;
    }
    .oneCash{
        display: flex;
        justify-content: space-between;
        align-items: center;
        /* padding: 0 0.56rem 0 0.44rem; */
        height: 0.95rem;
        background: #fff;
    }
    .oneCash >div{ 
        width: 30%;
        text-align: center;
    }
    .oneCash img {
        width: 1.16rem;
        height: 0.4rem;
    }
    .oneCash .time{
        color: #666;
        font-size: 0.28rem;
    }
    .oneCash .money{
        font-size: 0.32rem;
        font-weight: bold;
        color: #333333;
    }
    .modal{
        position: fixed; z-index: 10000000;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 100;
        background: rgba(0, 0, 0, 0.5);
        padding: 0 0.4rem;
        box-sizing: border-box;
    }
    .cashingBox{
        height: 5.1rem;
        background: #FFFFFF;
        border-radius: 0.15rem;
        margin-top: 50%;
        padding: 0.44rem 0.46rem;
        /* box-sizing: border-box; */
    }
    .c-top{
        font-size: 0.32rem;
        color: #010101;
        font-weight: 500;
    }
    .inputBox{
        text-align: center;
        font-size: 0.32rem;
        margin: 0.64rem 0;
    }
    .inputBox input{
        height: 0.72rem;
        width: 3.6rem;
        border-radius: 0.1rem;
        background: #EEF0F2;
        font-size: 0.32rem;
        padding: 0 0.17rem;
        margin-right: 0.14rem;
        box-sizing: border-box;
        text-align: right;
    }
    .mark{
        color: #666;
        font-size: 0.26rem;
    }
    .sureBox{
        margin-top: 0.64rem;
        display: flex;
        padding: 0 0.15rem;
        justify-content: space-between;
        font-size: 0.3rem;
    }
    .sure{
        display: inline-block;
        width: 2.3rem;
        height: 0.76rem;
        line-height: 0.76rem;
        text-align: center;
        color: #fff;
        background: #128FEF;
        border-radius: 0.38rem;
    }
    .cancel{
        display: inline-block;
        width: 2.3rem;
        height: 0.76rem;
        line-height: 0.76rem;
        text-align: center;
        color: #128FEF;
        background: #FFFFFF;
        border: 0.01rem solid #128FEF;
        border-radius: 0.38rem;
    }
    .cashContent{
        width: 100%;
        height: 7rem;
        overflow-y: auto;
    }
    .load-p{
        padding: 1rem 0 0 0;
        overflow: hidden;
    }
</style>
